<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Float Nav</title>
    <!-- 版本：0.0.2 -->
    <link href="https://cdn.bootcss.com/minireset.css/0.0.2/minireset.min.css" rel="stylesheet">



    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/pc/default.css?t=1">
    <link rel="stylesheet" type="text/css" href="css/wap/floatmenu.css">
    <link rel="stylesheet" type="text/css" href="css/theme.css">
    <style type="text/css">

    .cover{
        left:120%;
    }


    .loading{
    }
    .loading::before{
        content: "";
        position: absolute;
        left: -100%;
        top: 30%;
        width: 350px;
        height: 15px;
        background-color: rgba(255,255,255,.2);
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-animation: searchLights 1s ease-in 1s infinite;
        -o-animation: searchLights 1s ease-in 1s infinite;
        animation: searchLights 1s ease-in 1s infinite;
    }
    .loading .loadingitem{
        margin:20px auto;
    }

    .loading .loadingitem .loadingleft{
        height:55px;
        width:55px;
        margin:5px;
        border-radius:50%;
        background:rgba(250,250,250,.8);

        float:left;
    }
    .loading .loadingitem .loadingright{
        margin-left:90px;

    }
    .loading .loadingitem .loadingright .tips{
        color:#eee;
        font-style:italic;
        text-align: center;
    }

    .loading .loadingitem .loadingright div{
        margin-bottom:10px;
        background:rgba(250,250,250,.8);
        height: 15px;
        width:50%;
    }
    .loading .loadingitem .loadingright div:first-child{
        width:70%;
    }
    .loading .loadingitem .loadingright div:last-child{
        width:100%;
    }

@-webkit-keyframes searchLights {
    0% {
        left: -100%;
    }

    to {
        left: 80%;
    }
}

@-o-keyframes searchLights {
    0% {
        left: -100%;
    }

    to {
        left: 80%;
    }
}

@-moz-keyframes searchLights {
    0% {
        left: -100%;
    }

    to {
        left: 80%;
    }
}

@keyframes searchLights {
    0% {
        left: -100%;
    }

    to {
        left: 80%;
    }
}


    </style>

</head>
<body>
<header class="header">
    <div class="logo">
        <div class="logoimg"></div>
        <div class="smallmenu _bg">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="cover"></div>
    </div>
    <ul class="menu fr">
        <li class="item"><a class="_active" href="">首页</a></li>
        <li class="item"><a href="">课程</a></li>
        <li class="item"><a href="">实训室</a></li>
        <li class="item"><a href="">我的</a></li>
    </ul>
</header>
<div class="wrap">
    <div class="alert alert-success dn" role="alert">页面加载完成</div>
    <ul  class="loading">
        <li class="loadingitem">
            <div class="loadingleft"></div>
            <div class="loadingright">
                <div></div>
                <div></div>
                <div></div>
            </div>
        </li>        
        <li class="loadingitem">
            <div class="loadingleft"></div>
            <div class="loadingright">
                <div></div>
                <div class="tips">LOADING...</div>
                <div></div>
            </div>
        </li>  
        <li class="loadingitem">
            <div class="loadingleft"></div>
            <div class="loadingright">
                <div></div>
                <div></div>
                <div></div>
            </div>
        </li>     
    </ul>





</div>
</body>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script type="text/javascript">
$(document).ready(function(){
    $('.smallmenu').on('click',function(){
        $('.cover').addClass('l0');
        $('.menu').addClass('l0');
    })

    $('.cover').on('click',function(){
        $('.cover').removeClass('l0');
        $('.menu').removeClass('l0');
    })

    // setTimeout(function(){
    //     $('.loading').hide();
    //     $('.alert').removeClass('dn');
    // },3000)


})





</script>
</html>